<template>
	<div>
		<div class="scroll-wrapper">
			<div class="link-top">
				<span>{{ $t('sacnner.result') }}</span>
				<span @click="closeRemotelink">X</span>
			</div>
			<div class="iframe-box" id="iframe-box">
				<iframe allowTransparency="true" id="remotelink" width="1100px" height="100%" class="iframelink" :src="remotelinkurl"></iframe>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'RemoteLink',
	props: ['remotelinkurl'],
	methods: {
		closeRemotelink() {
			this.$emit('closeRemotelink');
		}
	}
};
</script>

<style scoped>
.remotelinktop {
	width: 100%;
	background-color: rgba(100, 202, 171, 1);
	height: 50px;
	position: absolute;
	left: 0;
	top: 0;
}

.closelinkimg {
	width: 30px;
	height: 30px;
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 10000;
}
.iframe-box {
	position: relative;
	height: 500px;
	width: 1000px;
	overflow-y: auto;
	overflow-x: hidden;
	border: 1px solid #ccc;
}
.iframelink {
	position: absolute;
	background: white;
	border: 0px;
	top: -1px;
	left: -54px;
	transform: scale(0.92, 1);
}
.link-top {
	display: flex;
	justify-content: space-between;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	background-color: #3a98ff;
}
.link-top span {
	font-size: 16px;
	padding: 4px 20px;
	color: #fff;
	cursor: pointer;
}

.scroll-wrapper {
	/* overflow-y: scroll; */
	position: absolute;
	top: 15%;
	z-index: 999;
	height: 500px;
	width: 1000px;
	margin-left: 12%;
	/* 提示: 请在此处加上需要设置的大小(dimensions)或位置(positioning)信息! */
	/* transform: scale(0.65,0.75); */
}
</style>
